<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ssss' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <!-- 搜索框 -->
        <div class="or">
          <!-- 搜索表单 -->
          <el-input
            v-model="input"
            placeholder="请输入内容"
            size="medium"
          ></el-input>
          <!-- 搜索按钮 -->
          <el-button style="margin-right: 500px">
            <i class="el-icon-search"></i>
          </el-button>
        </div>
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="" label="序号" align="center">
            <template slot-scope="{ $index }">
              <el-button size="small">
                {{ $index + 1 }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="order_number"
            label="订单列表"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="order_price"
            label="订单价格"
          ></el-table-column>

          <el-table-column align="center" prop="province" label="是否付款">
            <template slot-scope="{ row }">
              <!-- {{ row }} -->
              <el-tag type="danger" v-if="row.pay_status == '0'">未付款</el-tag>
              <el-tag type="success" v-else>已付款</el-tag>
            </template>
          </el-table-column>
          <!-- <template slot-scope="{ row }">
          </template> -->

          <el-table-column align="center" prop="is_send" label="是否发货">
          </el-table-column>

          <el-table-column align="center" prop="address" label="下单时间">
            <template slot-scope="{ row }">
              {{ new Date(row.create_time).toLocaleString() }}
            </template>
            <!-- 1970-01-20 19:17:25 -->
            <!-- {{ list.address }} -->
            <!-- datetime.datetime.fromtimestamp() -->
          </el-table-column>
          <el-table-column align="center" label="操作">
            <!-- slot-scope="scope" -->
            <template slot-scope="{ row }">
              <!-- 修改地址按钮 -->
              <el-button
                type="primary"
                size="small"
                @click="dialogFormVisible = true"
              >
                <i class="el-icon-edit"></i>
              </el-button>
              <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
                <el-form
                  :model="ruleForm"
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="省市区/县" label-width="100px">
                    <el-cascader
                      v-model="value"
                      :options="options"
                      @change="handleChange"
                      label-width="100px"
                      :size="small"
                    ></el-cascader>
                  </el-form-item>
                  <el-form-item
                    label="详细地址"
                    prop="name"
                    label-width="100px"
                  >
                    <el-input v-model="ruleForm.name"></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="dialogFormVisible = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <!-- 查看物流进度按钮 -->

              <el-button type="success" size="small" @click="ck1(row)">
                <i class="el-icon-location-outline"></i>
              </el-button>
              <el-dialog title="物流进度" :visible.sync="ck">
                <el-timeline>
                  <el-timeline-item
                    v-for="item in activities"
                    :key="item.time"
                    :timestamp="item.time"
                  >
                    {{ item.context }}
                  </el-timeline-item>
                </el-timeline>
                <div slot="footer" class="dialog-footer"></div>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import axios from 'axios'
import { huoQuOrder, wuLiu } from '@/api/orders'
import { regionData } from 'element-china-area-data'
export default {
  name: 'OrdersA',
  data () {
    return {
      options: regionData,
      selectedOptions: [],
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      activities: [],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      input: '',
      dialogFormVisible: false,
      ck: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      obj: {
        query: '',
        pagenum: 1,
        pagesize: 5,
      },
      currentPage: 1,
      list: [],
      total: 0,
      ssq: {
        sheng1: [],
        shi1: [],
        qu1: [],
      },
      value: [],

      formLabelWidth: 'auto'
    }
  },
  created () {
    this.fn()
    this.sheng()
  },
  computed: {
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    async fn () {
      const res = await huoQuOrder(this.obj)
      console.log(res);
      this.list = res.data.goods
      this.total = res.data.total
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.obj.pagesize = val
      this.fn()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.obj.pagenum = val
      this.fn()
    },
    async sheng () {
      const res = await axios.get('http://ajax-api.itheima.net/api/province')
      console.log(res.data.data);
      this.value = res.data.data
    },
    async ck1 (row) {
      // console.log(row.order_id);
      this.ck = true
      const res = await wuLiu(row.order_id)
      console.log(res);
      this.activities = res.data
    }
  }
}
</script>
<style lang='less'  scoped>
.or {
  display: flex;
  .el-input {
    vertical-align: middle;
  }
}
</style>
